<template>
	<view>
		<nav-custom></nav-custom>
		<view class="cont"><good-item v-for="(item, index) in glist" :gdata="item"></good-item></view>
		<!-- <view class="flex fixed bg-fff justify-center padding-sm">
			<view class="flex align-center justify-around" v-for="(item, index) in tabArr" :key="index" @click="handleTab(item)">
				<view class="">{{ item.name }}</view>
				<u-line v-if="index < tabArr.length - 1" direction="col" length="20" color="black" margin="30upx"></u-line>
			</view>
		</view>
		<u-popup :show="show" mode="left" @close="handleClose">
			<view class="pop-cont">
				<view v-for="(item, index) in cfylist">
					<view class="padding-sm u-border-bottom">
						{{ item.bname }}
						<view class="cu-tag round bg-yellow color-fff margin-left-xs">{{ item.num }}</view>
					</view>
					<view v-if="index == 0">
						<view @click="listShow = !listShow" class="padding-sm " :class="{ 'u-border-bottom': !listShow }">口味筛选</view>
						<u-cell-group v-show="listShow">
							<u-cell v-for="(itm, indx) in item.list" icon="setting-fill" :title="itm.tname" isLink @click="handleList(itm, 1)"></u-cell>
						</u-cell-group>
						<view @click="sceneShow = !sceneShow" class="padding-sm" :class="{ 'u-border-bottom': !sceneShow }">场景刷选</view>
						<u-cell-group v-show="sceneShow">
							<u-cell v-for="(itm, indx) in item.scene" icon="setting-fill" :title="itm.tname" isLink @click="handleList(itm, 2)"></u-cell>
						</u-cell-group>
					</view>
				</view>
			</view>
		</u-popup> -->
		<tab-custom></tab-custom>
	</view>
</template>

<script>
export default {
	data() {
		return {
			glist: [],
			page: 0,
			// tabArr: [
			// 	{name: '分类',bcid: '',target: ''},
			// 	{name: '蛋糕',bcid: '1',target: '/pages/cake/cake'},
			// 	{name: '面包',bcid: '11',target: '/pages/bread/bread'},
			// 	{name: '小食',bcid: '6',target: '/pages/food/food'},
			// 	{name: '购物车',	bcid: '',target: '/pages/cart/cart'}
			// ],
			// bcid: 1,
			// condition:{
			// 	// 商品列表的查询条件
			// 	bcid:1
			// },
			show: false,
			cfylist: [],
			listShow: false,
			sceneShow: false
		};
	},
	computed: {
		num() {
			return this.$store.state.count.num;
		},
		condition() {
			return this.$store.state.condition.cond;
		}
	},
	onLoad() {
		this.loadData();		
		this.$get('/1.1/classes/classify').then(res => {
			console.log(res);
			this.cfylist = res.results.slice(0, 4);
		});
	},
	onReachBottom() {
		this.loadData();
	},
	onPullDownRefresh() {
		(this.glist = []), (this.page = 0), this.loadData();
	},
	methods: {
		handleDetail(idx) {
			console.log(idx);
			uni.navigateTo({
				url: '../detail/detail?idx=' + idx
			});
		},
		loadData() {
			let skip = this.page * 8;
			let wh = JSON.stringify(this.condition);
			let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`;
			this.$get(url).then(res => {
				console.log(res);
				// this.glist=res.results
				uni.stopPullDownRefresh();
				let { results } = res;
				this.page++;
				if (results.length) {
					this.glist = [...this.glist, ...res.results];
					return;
				}
				uni.showToast({
					title: '亲，暂时还没有相关的数据了',
					icon: 'none'
				});
			});
		},
		reloadData() {
			// 刷新页面数据
			(this.glist = []), (this.page = 0), this.loadData();
		},
		// handleTab(item) {
		// 	let { bcid, target } = item;
		// 	if (bcid) {
		// 		// 商品列表的数据更新
		// 		// this.condition.bcid =Number(bcid);
		// 		this.$store.commit('changeCondition', {
		// 			bcid: Number(bcid)
		// 		});
		// 		this.reloadData();
		// 	}
		// 	if (!bcid && !target) {
		// 		// 开启侧边分类
		// 		this.show = true;
		// 	}
		// 	if(!bcid && target){
		// 		uni.navigateTo({
		// 			url:target
		// 		})
		// 	}
		// },
		
		// handleClose() {
		// 	this.show = false;
		// },
		// handleList({ bid, tid }, type) {
		// 	console.log(bid, tid);
		// 	// 口味场/景筛选
		// 	let obj = { bcid: bid };
		// 	type === 1 ? (obj.fid = tid) : (obj.sid = tid);
		// 	this.$store.commit('changeCondition', obj);
		// 	this.reloadData();
		// }
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: 100upx 0 120upx 0;
}
.cont {
	display: flex;
	flex-wrap: wrap;
	padding: 15upx;
	justify-content: space-between;
}
.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
.pop-cont {
	width: 400upx;
	margin-top: 100upx;
}
</style>
